<script setup lang="ts">
import {
  ref,
  reactive,
  computed,
  readonly,
  isRef,
  unref,
  toRef,
  toValue,
  toRefs,
  isReactive,
  isReadonly,
} from "vue";

const count = 18;
const countRef = ref(37);

const isRefCount = isRef(count);
const isRefCountRef = isRef(countRef);
const unRefCount = unref(count);
const unRefCountRef = unref(countRef);
</script>

<template>
  <div class="reactive-wrap">
    <h1>响应式工具</h1>
    <h3>isRef:{{ isRefCount }} --- {{  isRefCountRef }}</h3>
    <hr>
    <h3>unRef:{{ unRefCount }} --- {{  unRefCountRef }}</h3>
    <hr>
    <h3></h3>
    <hr>
    <h3></h3>
  </div>
</template>
<style>
h1 {
  text-align: center;
}
h3 {
  text-align: center;
}
</style>
